<template>
	<view>
		<view class="header">
			isClick 设置true执行点击标记点 设置false添加标记点
		</view>
		<view class="container">
			<canvas canvas-id="myCanvas" id="myCanvas" style="width: 100%; height: 100%;" @touchstart="handleTouchStart"
				@touchmove="handleTouchMove" @touchend="handleTouchEnd"></canvas>
		</view>
		<view class="button" @click="add">放大</view>
		<view class="button" @click="reduce">缩小</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgX: 0,
				imgY: 0,
				startX: 0,
				startY: 0,
				imgWidth: 0,
				imgHeight: 0,
				canvasWidth: 350,
				canvasHeight: 500,
				points: [{
						id: 1,
						x: 100,
						y: 100
					},
					{
						id: 2,
						x: 110,
						y: 110
					},
					{
						id: 3,
						x: 400,
						y: 400
					}
				],
				isDragging: false,
				canvasTop: 0,
				scale: 1,
				distanceX: 30,
				distanceY: 40,
				isClick: true // 区分点击 还是 添加图标
			};
		},
		onReady() {
			this.initCanvas();
			this.$nextTick(() => {
				this.getElementTop();
			});
		},
		methods: {
			add() {
				this.scale = Math.min(this.scale + 0.5, 2);
				this.scaleCanvas();
			},
			reduce() {
				this.scale = Math.max(this.scale - 0.5, 1);
				this.scaleCanvas();
			},
			getElementTop() {
				const query = uni.createSelectorQuery().in(this);
				query.select('#myCanvas').boundingClientRect(data => {
					if (data) {
						this.canvasTop = data.top;
					}
				}).exec();
			},
			scaleCanvas() {
				const context = uni.createCanvasContext('myCanvas');
				const imgPath = '../../static/1.jpg';
				this.drawImage(context, imgPath, true);
			},
			initCanvas() {
				const context = uni.createCanvasContext('myCanvas');
				const imgPath = '../../static/1.jpg';

				uni.getImageInfo({
					src: imgPath,
					success: (res) => {
						this.imgWidth = res.width;
						this.imgHeight = res.height;
						this.drawImage(context, imgPath, true);
					}
				});
			},
			drawImage(context, imgPath, shouldDraw = false) {
				context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
				context.save();
				context.scale(this.scale, this.scale);
				context.drawImage(imgPath, this.imgX / this.scale, this.imgY / this.scale, this.imgWidth, this.imgHeight);

				this.points.forEach(point => {
					const relativeX = point.x * this.scale;
					const relativeY = point.y * this.scale;
					context.drawImage("../../static/she.png", (this.imgX + relativeX) / this.scale, (this.imgY +
						relativeY) / this.scale, 20 / this.scale, 20 / this.scale);
					context.setFontSize(10 / this.scale);
					context.setFillStyle('#333');
					context.setTextAlign('left');
					context.fillText("5min", (this.imgX + relativeX) / this.scale, (this.imgY + relativeY - 5 /
						this.scale) / this.scale);
				});

				context.restore();
				if (shouldDraw) {
					context.draw(false, () => {});
				}
			},
			handleTouchStart(e) {
				this.startX = e.touches[0].clientX - this.imgX;
				this.startY = e.touches[0].clientY - this.imgY;
				this.isDragging = false;
			},
			handleTouchMove(e) {
				this.isDragging = true;
				let newX = e.touches[0].clientX - this.startX;
				let newY = e.touches[0].clientY - this.startY;

				if (newX > 0) newX = 0;
				if (newY > 0) newY = 0;
				if (newX < this.canvasWidth - this.imgWidth * this.scale) newX = this.canvasWidth - this.imgWidth * this
					.scale;
				if (newY < this.canvasHeight - this.imgHeight * this.scale) newY = this.canvasHeight - this.imgHeight *
					this.scale;

				this.imgX = newX;
				this.imgY = newY;

				const context = uni.createCanvasContext('myCanvas');
				const imgPath = '../../static/1.jpg';
				this.drawImage(context, imgPath, true);
			},
			handleTouchEnd(e) {
				if (!this.isDragging) {
					const touch = e.changedTouches[0];
					// 点击标记
					if (this.isClick) {
						this.handleClick(touch)
					} else {
						// 添加标记
						this.handleAdd(touch)
					}
				}
			},
			handleAdd(touch) {
				const currentScale = this.scale;
				const pointX = (touch.clientX - this.imgX) / currentScale;
				const pointY = (touch.clientY - this.imgY - this.canvasTop) / currentScale;
				this.points.push({
					x: pointX,
					y: pointY
				});

				const context = uni.createCanvasContext('myCanvas');
				const imgPath = '../../static/1.jpg';
				this.drawImage(context, imgPath, true);
			},
			handleClick(touch) {
				const currentScale = this.scale;
				const pointX = (touch.clientX - this.imgX) / currentScale;
				const pointY = (touch.clientY - this.imgY - this.canvasTop) / currentScale;
				const distanceX = this.distanceX / this.scale
				const distanceY = this.distanceY / this.scale
				// console.log("pointX--->", pointX);
				// console.log("pointY--->", pointY);
				const eleArr = this.points.filter(item => (pointX > (item.x - distanceX) && pointX < (item.x +
					distanceX)) && (pointY >
					(item.y - distanceY) && pointY < (item.y + distanceY)))
				if (eleArr.length != 0) {
					console.log("eleArr--->", eleArr[0].id);
				}
			}
		}
	};
</script>

<style scoped>
	.container {
		position: relative;
		width: 700rpx;
		height: 1000rpx;
		overflow: hidden;
		margin: 0 auto;
		border-radius: 25rpx;
		border: 1rpx solid #333;
		box-sizing: border-box;
	}

	.header {
		height: 120rpx;
		font-size: 24rpx;
		background-color: #f5f5f5;
	}

	.button {
		margin: 20rpx;
		padding: 10rpx 20rpx;
		background-color: #007bff;
		color: #fff;
		text-align: center;
		border-radius: 5rpx;
		user-select: none;
	}
</style>